<template>
  <view :class="['page-footer', { iphonex: isIphoneX }]">
    <!-- #ifdef H5 -->
    <navigator :url="url">
      <button class="page-footer__btn">下载{{ appName }}App</button>
    </navigator>
    <!-- #endif -->
    <view class="page-footer__logo">
      <image class="page-footer__img" src="../static/comps/book-gray.png" />
      <text>海量高品质小说抢先看，就在{{ appName }}</text>
    </view>
  </view>
</template>

<script>
import { APP_NAME } from '@/config';
import { buildUrl } from '@/utils';
import { isIphoneX } from '../utils';

export default {
  data() {
    return {
      url: buildUrl(
        'https://mbook.andylistudio.com/app_download',
        `下载${APP_NAME}App`
      ),
      isIphoneX: isIphoneX(),
      appName: APP_NAME,
    };
  },
};
</script>

<style lang="scss">
.page-footer {
  padding: 30rpx $page-row-spacing;

  &.iphonex {
    padding-bottom: 68rpx;
  }

  &__btn {
    background: $page-main-color;
    width: 100%;
    color: #fff;
    font-size: 26rpx;
    margin-bottom: 20rpx;
  }

  &__logo {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    color: $font-color-light;
    font-size: 26rpx;
  }

  &__img {
    display: inline-block;
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
  }
}
</style>
